import * as React from "react";
import moment from "moment";
import EleTimeSharingCharts from "./compontents/EleTimeSharingCharts";
import "./index.less";

export interface TimeSharingPowerProps {
  time: number;
  timeType: number;
  dataSouce: any;
}

export interface TimeSharingPowerState {
  timeType: number;
  dataTime: string;
  eleTimeGroupData: {
    fee: number;
    usedFVal: number;
    usedGVal: number;
    usedJVal: number;
    usedPVal: number;
    usedVal: number;
  };
  chartsEleTimeGroupData: {
    listF: number[];
    listG: number[];
    listJ: number[];
    listP: number[];
  };
}

class TimeSharingPower extends React.Component<
  TimeSharingPowerProps,
  TimeSharingPowerState
> {
  state = {
    timeType: 2,
    dataTime: "",
    eleTimeGroupData: {
      fee: 0,
      usedFVal: 0,
      usedGVal: 0,
      usedJVal: 0,
      usedPVal: 0,
      usedVal: 0,
    },
    chartsEleTimeGroupData: {
      listF: [],
      listG: [],
      listJ: [],
      listP: [],
    },
  };
  render() {
    let {
      dataTime,
      chartsEleTimeGroupData,
      timeType,
      eleTimeGroupData,
    } = this.state;
    let { usedFVal, usedPVal, usedGVal, fee, usedVal } = eleTimeGroupData;
    let { toPercent } = this;
    return (
      <>
        <div className="TimeSharingPower">
          <h2>02&nbsp;&nbsp;分时电量</h2>
          <div className="tit1">{dataTime}分时电量</div>
          <EleTimeSharingCharts
            type={timeType}
            dataSouce={chartsEleTimeGroupData}
          />
          <div className="pText">
            电量分析：{dataTime}
            ，峰电能总量为{usedFVal}
            kW·h，平电能总量为{usedPVal}
            kW·h，谷电能总量为{usedGVal}
            kW·h。其中峰电能占比为
            {usedVal ? toPercent(usedFVal / usedVal) : "0%"}
            ，平电能占比为{usedVal ? toPercent(usedPVal / usedVal) : "0%"}
            ，谷电能占比
            {usedVal ? toPercent(usedGVal / usedVal) : "0%"}； 电费分析：
            {dataTime}
            电能费用为{fee}元；
          </div>
        </div>
      </>
    );
  }
  shouldComponentUpdate(
    newProps: TimeSharingPowerProps,
    newState: TimeSharingPowerState
  ) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      //格式化时间获取（当前，上一单位，去年当前）
      this.FormatDate(newProps.timeType, newProps.time);
      this.getData(newProps.dataSouce);
    }
    return true;
  }
  componentWillMount() {
    this.FormatDate(this.props.timeType, this.props.time);
    this.getData(this.props.dataSouce);
  }
  /**方法函数 */

  //小数转百分数
  toPercent(point: number) {
    var str = Number(point * 100).toFixed(1);
    str += "%";
    return str;
  }
  //求和
  getSum(list: number[]) {
    let sum: number = 0;
    list.map((num: number) => {
      sum += num;
      return num;
    });
    return sum;
  }
  //获取数据
  getData(data: any) {
    if (data) {
      let { chartsEleTimeGroupData, eleTimeGroupData } = data;
      if (eleTimeGroupData) {
        this.setState({
          eleTimeGroupData,
        });
      }
      if (chartsEleTimeGroupData) {
        this.setState({
          chartsEleTimeGroupData,
        });
      }
    }
  }
  //格式化时间
  FormatDate(type: number, time: number) {
    let dataTime: string = "";
    switch (type) {
      case 2:
        dataTime = moment(time).format("YYYY年MM月DD日");
        break;
      case 3:
        dataTime = moment(time).format("YYYY年MM月");
        break;
      case 4:
        dataTime = moment(time).format("YYYY年");

        break;
      default:
        break;
    }
    this.setState({ dataTime, timeType: type });
  }
}

export default TimeSharingPower;
